<template>
  <div>
    <el-table
      ref="selectionTable"
      v-if="isChecked"
      @selection-change="handleSelectionChange"
      :data="tableData" >
      <el-table-column
        type="selection"
        align="center"
        width="55">
      </el-table-column>
      <el-table-column type="index" label="序号" width="80px" align="center" v-if="isHasNo">
      </el-table-column>
      <slot name="tableLeft"></slot>
      <table-column :columnHead="item" v-for="(item,index) in tableHead" :key="index"/>
      <slot name="tableRight"></slot>
      <template slot="empty">
        <img
          class="dataEmpty"
          style="width: 3rem;height: 2rem"
          src="@/assets/images/500_images/void.png"
          alt=""
          v-show="tableData.length"
        />
      </template>
    </el-table>
    <el-table
      v-else
      :data="tableData" >
      <el-table-column type="index" label="序号" width="80px" align="center" v-if="isHasNo">
      </el-table-column>
      <slot name="tableLeft"></slot>
      <table-column :columnHead="item" v-for="(item,index) in tableHead" :key="index"/>
      <slot name="tableRight"></slot>
      <template slot="empty">
        <img
          class="dataEmpty"
          style="width: 3rem;height: 2rem"
          src="@/assets/images/500_images/void.png"
          alt=""
          v-show="!(tableData&&tableData.length)"
        />
      </template>
    </el-table>
  </div>

</template>
<script>
/**
 *    params                type              remark
 *    tableData             Array             表格数据接收正常的数组对象
 *    tableHead             Array             表头数组传入一个树形结构数组
 *    isChecked             Boolean           是否开启多选，此参数会派发一个自定义函数getTableChecked来获取Value，返回对象为{value,ref}
 *    isHasNo               Boolean           是否展示序号
 * 
 *    组件支持传入首尾模板，首尾点击事件可添加到此处
 */
import tableColumn from './tableColumn.vue'
export default {
  components:{
    tableColumn
  },
  props: {
    tableData: {
      type: Array,
      required: true
    },
    tableHead: {
      type: Array,
      required: true
    },
    isChecked: {
      type: Boolean,
      required: false,
      default: false
    },
    isHasNo: {
      type: Boolean,
      required: false,
      default: false
    },
    rowConfig: {
      type: Object,
      required: false,
      default: () => {return {}}
    }
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val)
      this.$emit("getTableChecked",{value:val,ref:this.$refs.selectionTable})
    }
  }
}
</script>